<template>
  <view class="container">
    <!-- 温度弹窗 -->
    <u-popup :show="open" @close="open = false" @open="open = true">
      <view class="temperaturePopupBox">
        <view class="popup_hearder">
          <view class="cancel" @click="open = false">取消 </view>
          <view class="title">温度</view>
          <view class="confirm" @click="confirm"> 完成</view>
        </view>

        <view class="subsrction_type">
          <u-subsection
            :list="['小于', '等于', '大于']"
            mode="button"
            :current="temperatureType"
            @change="sectionChange"
            bgColor="rgba(238, 238, 238, 1)"
          ></u-subsection>
        </view>

        <view class="num_change">
          <img
            src="@/static/automation/left.png"
            alt=""
            srcset=""
            @click="popTemperature = popTemperature - 1"
          />
          <text>{{ popTemperature }}℃ </text>
          <img
            src="@/static/automation/right.png"
            alt=""
            srcset=""
            @click="popTemperature = popTemperature + 1"
          />
        </view>

        <view class="temperature_slider">
          <text>-40℃ </text>
          <view class="slider_group">
            <u-slider min="-40" max="40" v-model="popTemperature"></u-slider>
          </view>
          <text>40℃ </text>
        </view>
      </view>
    </u-popup>
  </view>
</template>
  
  <script>
export default {
  components: {},
  data() {
    return {
      //   温度弹窗开关
      open: false,

      //   大于或者小于或者等于
      temperatureType: 0,
      //   当前选择的温度
      popTemperature: 0,
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  methods: {
    confirm() {
      this.open = false;
      //   把数据传给父组件
      this.$emit("confirm", {
        type: this.temperatureType,
        temperature: this.popTemperature,
      });
    },
    sectionChange(index) {
      this.temperatureType = index;
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.container {
  background: #f6f7fb;
}

.temperaturePopupBox {
  padding: 25.568rpx 76.705rpx 102.273rpx 76.705rpx;
  background: rgba(255, 255, 255, 1);

  .popup_hearder {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  title {
    font-family: "Microsoft YaHei";
    font-size: 25.568rpx;
    font-weight: 290;
    line-height: 34.006rpx;
    text-align: center;
    color: rgba(0, 0, 0, 0.75);
  }

  .confirm {
    color: rgba(32, 132, 255, 1);
    font-family: "Microsoft YaHei";
    font-size: 27.273rpx;
    font-weight: 400;
    line-height: 36rpx;
    text-align: right;
  }

  .cancel {
    color: rgba(109, 110, 111, 1);
    font-family: "Microsoft YaHei";
    font-size: 27.273rpx;
    font-weight: 400;
    line-height: 36rpx;
    text-align: right;
  }
}
.subsrction_type {
  margin-top: 49.432rpx;
}
.num_change {
  margin-top: 49.432rpx;

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(0, 0, 0, 0.75);
  font-family: "Microsoft YaHei";
  font-size: 102.273rpx;
  font-weight: 400;
  line-height: 134.983rpx;
  text-align: center;
  text {
    margin-left: 51.136rpx;
    margin-right: 51.136rpx;
  }
  img {
    width: 27.273rpx;
    height: 52.841rpx;
  }
}
.temperature_slider {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40.909rpx;
  .slider_group {
    width: 80%;
  }
  text {
    color: rgba(0, 0, 0, 0.75);
    font-family: "Microsoft YaHei";
    font-size: 20.455rpx;
    font-weight: 400;
    line-height: 27rpx;
    text-align: center;
  }
}
</style>
  